<template>
  <div class="example">
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:leave-cancelled="leaveCancelled"
      v-bind:css="false"
    >
      <p v-if="isShow">
        Demo
      </p>
    </transition>
    <div class="btn">
      <button @click="handleClick">{{ isShow ? "隐藏" : "显示" }}</button>
    </div>
  </div>
</template>

<script>
/**
 * 例子 - JavaScript 钩子
 */

/**
 * 动态加载JavaScript
 */
function loadJS(url) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

export default {
  data() {
    return {
      isShow: true,
    };
  },
  created() {
    loadJS(
      `https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js`
    );
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow;
    },
    beforeEnter: function (el) {
      console.log("beforeEnter", "进入之前");
      el.style.opacity = 0;
      el.style.transformOrigin = "left";
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    enter: function (el, done) {
      console.log("enter", "进入中，动画进行时");
      Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
      Velocity(el, { fontSize: "1em" }, { complete: done });
    },
    afterEnter: function (el) {
      console.log("afterEnter", "进入之后");
    },
    enterCancelled: function (el) {
      console.log("enterCancelled", "进入被取消");
    },
    beforeLeave: function (el) {
      console.log("beforeLeave", "离开之前");
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    leave: function (el, done) {
      console.log("leave", "离开中, 动画进行时");
      Velocity(el, { translateX: "15px", rotateZ: "50deg" }, { duration: 600 });
      Velocity(el, { rotateZ: "100deg" }, { loop: 2 });
      Velocity(
        el,
        {
          rotateZ: "45deg",
          translateY: "30px",
          translateX: "30px",
          opacity: 0,
        },
        { complete: done }
      );
    },
    afterLeave: function (el) {
      console.log("afterLeave", "离开之后");
    },
    // leaveCancelled 只用于 v-show 中
    leaveCancelled: function (el) {
      console.log("leaveCancelled", "离开之后");
    },
  },
};
</script>
